<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {getGoodListApi} from "@/api/home/goodList";

// 定义数据
const goodList = ref([])

// 定义方法
async function getGoodList() {
  const res = await getGoodListApi()
  if(res.msg == '操作成功'){
    goodList.value = res.result
  }
}

onMounted(() => {
  getGoodList()
})
</script>

<template>
  <div class="good-list-container" v-for="item in goodList" :key="item.id">
    <div class="good-list-title">
      <div class="good-list-title-left">
        <h2>{{item.name}}</h2>
      </div>
      <div class="good-list-title-right">
        <div class="gltr-type">
          <div class="gltr-type-item" v-for="type in item.children" :key="type.id"><span>{{type.name}}</span></div>
        </div>
        <div class="gltr-more">
          <span>查看全部</span>
          <i class="iconfont icon-xiangyou"></i>
        </div>
      </div>
    </div>
    <div class="good-list-content">
      <div class="good-list-item-left">
        <img  v-lazy-img="item.picture" >
      </div>
      <div class="good-list-item-right">
        <div class="good-list-item-right-item" v-for="goodItem in item.goods" :key="goodItem.id">
          <div class="gliri-img">
            <img v-lazy-img="goodItem.picture">
          </div>
          <div class="gliri-name">
            <p>{{goodItem.name}}</p>
            <p>{{goodItem.desc}}</p>
          </div>
          <div class="gliri-price">
            <span>¥{{goodItem.price}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.good-list-container{
  margin-bottom: 3.3rem;
}
.good-list-container:last-child{
  margin-bottom: 0;
}

.good-list-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3.3rem;
}

.good-list-title-left h2 {
  font-size: 2.6rem;
  font-weight: 400;
}

.good-list-title-right {
  display: flex;
  align-items: center;
  gap: 4.1rem;
}

.gltr-type-item span {
  display: inline-block;
  font-size: 1.33rem;
  padding: 2px 1rem;
  cursor: pointer;
  color: #333;
}

.gltr-type-item:hover span {
  color: #fff;
  background-color: var(--primary-color);
  border-radius: 4px;
}

.gltr-more {
  font-size: 1.33rem;
  color: #999;
  cursor: pointer;
}

.gltr-type {
  display: flex;
}

.good-list-content {
  display: flex;
  gap: 1.66rem;
}


.good-list-item-left img {
  width: 30.1rem;
}

.good-list-item-right {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.83rem;
  flex: 1;
}

.good-list-item-right-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.83rem 2.5rem;
  box-sizing: border-box;
  transition: 0.3s;
  border: 1px solid transparent;
}

.good-list-item-right-item:hover {
  border: 1px solid var(--primary-color);
}

.gliri-img {
  width: 100%;
  margin-bottom: 0.83rem;
}

.gliri-img img {
  width: 100%;
}


.gliri-name {
  width: 20rem;
  margin-bottom: 0.83rem;
}

.gliri-name p {
  font-size: 1.33rem;
  cursor: pointer;
}


.gliri-name p:first-child {
  margin-bottom: 0.6rem;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 3.9rem;
}

.gliri-name p:nth-of-type(2) {
  width: 100%;
  /*省略号*/
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.gliri-price span {
  font-size: 1.66rem;
  color: #cf4444;
}
</style>